import React, { memo } from "react";
import { Button } from "antd";
import { ButtonItem, ButtonProp, ButtonChangePorps } from "../../type/button";
import styles from "./index.module.css";

const Index = (props: ButtonProp) => {
  const { buttonConfig, onChange } = props;
  const handleClickButton = (event: ButtonChangePorps) => {
    onChange && onChange(event);
  };
  const renderButton = (buttonConfig: ButtonItem[]) => {
    return buttonConfig.map((ite, index) => {
      return (
        <Button
          type={ite.type}
          danger={ite.danger}
          key={ite.label}
          disabled={ite.disabled}
          className={styles.button}
          onClick={() => handleClickButton({ value: ite.label, key: index })}
        >
          {ite.label}
        </Button>
      );
    });
  };
  return <div>{renderButton(buttonConfig)}</div>;
};
export default memo(Index);
